<template>
  <div class="page-container">
    <div class="page-header">
      <button class="back-button" @click="goToHome">
        <span class="icon-arrow-left"></span>
        返回首页
      </button>
      <h1>系统设置</h1>
      <p>管理工单系统的基本配置和参数选项</p>
    </div>
    
    <div class="settings-card">
      <h2>基本配置</h2>
      <div class="form-grid">
        <div class="form-group">
          <label>系统名称</label>
          <input type="text" v-model="systemName" placeholder="请输入系统名称">
        </div>
        <div class="form-group">
          <label>系统版本</label>
          <input type="text" v-model="systemVersion" placeholder="请输入系统版本" readonly>
        </div>
        <div class="form-group">
          <label>默认语言</label>
          <select v-model="defaultLang">
            <option value="zh-CN">简体中文</option>
            <option value="en">英文</option>
          </select>
        </div>
        <div class="form-group">
          <label>时区设置</label>
          <select v-model="timezone">
            <option value="Asia/Shanghai">Asia/Shanghai (UTC+8)</option>
            <option value="UTC">UTC</option>
          </select>
        </div>
      </div>
    </div>

    <div class="settings-card mt-20">
      <h2>工单配置</h2>
      <div class="form-grid">
        <div class="form-group">
          <label>默认工单有效期</label>
          <input type="number" v-model="ticketValidity" min="1" placeholder="天">
        </div>
        <div class="form-group">
          <label>工单自动关闭时间</label>
          <input type="number" v-model="autoCloseTime" min="1" placeholder="天">
        </div>
        <div class="form-group">
          <label>开启工单通知</label>
          <div class="toggle-switch">
            <input type="checkbox" v-model="enableNotification" id="notification">
            <label for="notification" class="switch"></label>
          </div>
        </div>
        <div class="form-group">
          <label>允许匿名提交</label>
          <div class="toggle-switch">
            <input type="checkbox" v-model="allowAnonymous" id="anonymous">
            <label for="anonymous" class="switch"></label>
          </div>
        </div>
      </div>
    </div>

    <div class="button-group">
      <button class="btn-primary" @click="saveSettings">保存设置</button>
      <button class="btn-secondary" @click="resetSettings">重置</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SystemSettings',
  data() {
    return {
      systemName: '工单管理系统',
      systemVersion: 'v1.0.0',
      defaultLang: 'zh-CN',
      timezone: 'Asia/Shanghai',
      ticketValidity: 7,
      autoCloseTime: 30,
      enableNotification: true,
      allowAnonymous: false
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    saveSettings() {
      // 保存设置的逻辑
      this.$message.success('系统设置已保存');
    },
    resetSettings() {
      // 重置设置的逻辑
      this.$message.info('已重置为默认设置');
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e1e5e8;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

h1 {
  margin: 15px 0 10px;
  color: #2c3e50;
}

.page-header p {
  color: #7f8c8d;
  margin: 0;
}

.settings-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

h2 {
  margin-top: 0;
  color: #34495e;
  font-size: 18px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.form-group {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e1e5e8;
  border-radius: 5px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #3498db;
  outline: none;
}

.toggle-switch {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-left: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #3498db;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.button-group {
  margin-top: 30px;
  display: flex;
  gap: 15px;
}

.btn-primary {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #ecf0f1;
  color: #34495e;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background: #dcdde1;
}

.mt-20 {
  margin-top: 20px;
}
</style>